<!--
 * @Author: alenjzhang
 * @Date: 2024-04-21 16:58:45
 * @Description: 服务进展详情
-->
<script setup>
import Nav from '@/components/nav';
import Progress from '@/components/progress.vue';

const arr = ref(Array.from({ length: 10 }).fill({}));
const tab1value = ref('1');
</script>

<template>
  <Nav title="服务进展" />
  <view class="card">
    <view>
      <view class="font-700 font-size-5 mb1 flex-1">
        名称
      </view>
      <view>
        服务标准：借助
      </view>
      <view>
        能力评估：万豪
      </view>
    </view>
    <view>
      <nut-avatar shape="square" size="large">
        <image src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
      </nut-avatar>
    </view>
  </view>
  <nut-tabs v-model="tab1value" custom-class="tag-tabs" custom-color="#05775C" swipeable>
    <nut-tab-pane title="Tab 1" pane-key="1" />
    <nut-tab-pane title="Tab 2" pane-key="2" />
    <nut-tab-pane title="Tab 3" pane-key="3" />
  </nut-tabs>
  <scroll-view scroll-y="true" class="mt5 overflow-auto service-content">
    <view class="mb4">
      清洁类服务
    </view>
    <view v-for="(_, i) in arr" :key="i" class="wrap bd-8 mb4">
      <view class="flex-1 mr4">
        <view class="mb2 flex items-center">
          <view class="font-600">
            洗漱
          </view>
          <view class="color-#27BA97">
            （1 / 2）
          </view>
        </view>
        <Progress
          value="10"
        />
      </view>
      <view>
        <nut-avatar shape="square" size="large">
          <image src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
        </nut-avatar>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
.tag-tabs {
  .nut-tabs__content {
    display: none;
  }
  .nut-tab-pane {
    padding: 0 !important;
  }
  .nut-tabs__list {
    background: #fff;
  }
  .nut-tabs__titles-item {
    flex: unset !important;
  }
  .nut-tabs-active {
    color: #05775C !important
  }
}
</style>

<route lang="json">
</route>
